<template>
  <div>
    <div>
      <el-input placeholder="请输入内容" v-model="searchName">
        <template slot="append">
          <el-button type="primary" @click="search">搜索</el-button>
        </template>
      </el-input>
    </div>
    <el-table :data="tableData" stripe>
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>    
  </div>
</template>
<script>
import http from "../../util/http";
import apiUrl from "../../util/api";
export default {
  data() {
    return {
      tableData: [],
      searchName: "",
    };
  },
  mounted() {
    this.getAll();
  },
  methods: {
    search() {
      console.log(this.searchName);
      this.getAll();
    },
    getAll() {
        if(!this.searchName){
            return;
        }
      http
        .get("search?keywords=" + this.searchName)
        .then((res) => {
          console.log(res);
          this.tableData = res.result.songs;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>